<template>
  <!-- 先写web端, 写完那个github 静态界面, 然后再写 移动端 
      1. 头部的效果先不做 
      2. 为了防止头部的字体折叠，width 小到一定程度后就直接切换为 手机版了
  -->
  <n-card
    :bordered="false"
    class="header trans-03 flex flex-row items-center justify-center bg-transparent px-10"
    content-style="padding:0"
  >
    <!-- 语义标签 -->
    <section class="grid w-full grid-cols-3 items-center justify-between">
      <!-- logo -->
      <div
        class="logo flex cursor-pointer items-center justify-start"
        @click="router.push('/')"
      >
        <img
          class="trans-03 mr-4 h-12 w-12"
          src="/public/ico/favicon.png"
          alt="logo"
        />
        <div class="name flex flex-col">
          <n-text class="text-xl font-bold leading-8">今日热榜</n-text>
          <n-text class="text-xs leading-5" :depth="3"
            >汇聚全网热点，热门尽览无余</n-text
          >
        </div>
      </div>
      <!-- 时间组件 -->
      <div class="current-time flex flex-col items-center justify-center">
        <n-text>{{ mainData.timeDate.time }}</n-text>
        <n-text class="text-xs" :depth="3">{{
          mainData.timeDate.lunar.text
        }}</n-text>
      </div>
      <!-- 设置 -->
      <div class="">
        <n-space justify="end">
          <n-popover>
            <template #trigger>
              <n-button secondary strong round @click="router.go(0)">
                <template #icon>
                  <n-icon :component="Refresh"></n-icon>
                </template>
              </n-button>
            </template>
            刷新界面
          </n-popover>
          <n-popover>
            <template #trigger>
              <n-button secondary strong round @click="changeTheme()">
                <template #icon>
                  <n-icon :component="Moon"></n-icon>
                </template>
              </n-button>
            </template>
            暗夜模式
          </n-popover>
          <n-popover>
            <template #trigger>
              <n-button secondary strong round @click="">
                <template #icon>
                  <n-icon :component="SettingTwo"></n-icon>
                </template>
              </n-button>
            </template>
            全局设置
          </n-popover>
        </n-space>
      </div>
    </section>
  </n-card>
</template>

<script setup lang="ts">
import { Moon, Refresh, SettingTwo } from '@icon-park/vue-next'
import { useRouter } from 'vue-router'
import { useMainDataStore } from '@/store/mainData'
import getCurrentTime from '@/utils/getTime'
// 即便没有导入 /hooks/useTheme 中的响应式变量 isDark，changeTheme 还是会进入文件中去执行
import { changeTheme } from '@/hooks/useTheme'

const tiemInterval = ref<number>()
const router = useRouter()
const mainData = useMainDataStore()

onMounted(() => {
  // 计时器返回一个 number 类型
  window.$setInterval = tiemInterval.value = setInterval(() => {
    mainData.timeDate = getCurrentTime()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(tiemInterval.value)
})
</script>

<style lang="scss" scoped>
.header {
  height: 118px;
  padding-left: 5vw;
  padding-right: 5vw;
  section {
    max-width: 1800px;
  }
}
</style>
